<template>
  <div class="mine">
    <!-- #ifdef MP-WEIXIN || H5 -->
    <xlNavBar title=" " :showLeft="false" :isMark="false" bgc="transparent"></xlNavBar>
    <!-- #endif -->
    <div class="mine-top">
      <image src="https://canyinxinxi.cn/dist_img/46_1681655743566255088.mr75p6akXYxcef01871a73325e18e1b0f88abd4895bf.jpg" mode="scaleToFill" />
    </div>

    <div
      class="mine_info"
      :style="{
        paddingTop: navHeight + systemBarHeight + 'px',
      }"
    >
      <div class="mine_login_info">
        <image class="user_head" src="/static/images/common/defaultUserHead.png" mode="scaleToFill" />
        <div class="right_info" v-if="!getUserInfo">
          <!-- #ifdef MP-WEIXIN -->
          <button class="login_btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权登录</button>
          <!-- #endif -->
          <!-- #ifdef H5  -->
          <button class="login_btn" @click="H5Login">授权登录</button>
          <!-- #endif -->
          <!-- #ifdef APP-PLUS  -->
          <button class="login_btn" @click="appLogin">授权登录</button>
          <!-- #endif -->
          <div class="desc">登录后享用更好的服务</div>
        </div>
        <div class="right_info" v-else-if="getUserInfo && getUserInfo.phone">
          <div class="phone">{{ getUserInfo.phone }}</div>
          <div class="desc">餐饮人的服务平台</div>
        </div>
      </div>
      <div class="mine_meau_1">
        <div class="meau_item" @click="gomyjf">
          <div class="value">{{ (getUserInfo && getUserInfo.integral) || 0 }}</div>
          <div class="name">我的积分</div>
        </div>
        <div class="meau_item" @click="meau1('/pages3/collectionrecord')">
          <div class="value">{{ (getUserInfo && getUserInfo.collect_num) || 0 }}</div>
          <div class="name">我的收藏</div>
        </div>
        <div class="meau_item" @click="meau1('/pages3/callrecord')">
          <div class="value">{{ (getUserInfo && getUserInfo.buy_num) || 0 }}</div>
          <div class="name">拨打记录</div>
        </div>
      </div>
      <div class="mine_meau_2">
        <div class="title">常用功能</div>
        <div class="meau_list">
          <div class="item" v-if="getUserInfo && getUserInfo.phone && getUserStatus && getUserStatus.job_status" @click="meau1('/pages2/regulateJobs', phone)">
            <image class="icon" src="/static/images/common/mine_fbzg.png" mode="scaleToFill" />
            <div class="text">管理招聘</div>
          </div>
          <div class="item" v-else @click="meau1('/pages2/postOffer')">
            <image class="icon" src="/static/images/common/mine_fbzg.png" mode="scaleToFill" />
            <div class="text">发布招聘</div>
          </div>
          <div class="item" @click="meauTop()">
            <image class="icon" src="/static/images/common/mine_zdzg.png" mode="scaleToFill" />
            <div class="text">置顶招聘</div>
          </div>
          <div class="item" v-if="getUserInfo && getUserInfo.phone && getUserStatus && getUserStatus.resume_status" @click="meau1('/pages2/regulateResume', phone)">
            <image class="icon" src="/static/images/common/mine_fbqz.png" mode="scaleToFill" />
            <div class="text">管理求职</div>
          </div>
          <div class="item" v-else @click="meau1('/pages2/postRecruitmentInformation')">
            <image class="icon" src="/static/images/common/mine_fbqz.png" mode="scaleToFill" />
            <div class="text">发布求职</div>
          </div>
          <div class="item" @click="meauResume()">
            <image class="icon" src="/static/images/common/mine_jjqz.png" mode="scaleToFill" />
            <div class="text">加急求职</div>
          </div>

          <div class="item" v-if="getUserInfo.phone && getUserStatus && getUserStatus.storefront_status" @click="meau1('/shopPackage/manageStore', phone)">
            <image class="icon" src="/static/images/common/store-publish.png" mode="scaleToFill" />
            <div class="text">管理店铺</div>
          </div>
          <div class="item" v-else @click="meau1('/shopPackage/publishStore')">
            <image class="icon" src="/static/images/common/store-publish.png" mode="scaleToFill" />
            <div class="text">发布店铺</div>
          </div>
          <div class="item" @click="topStore()">
            <image class="icon" src="/static/images/common/store-top.png" mode="scaleToFill" />
            <div class="text">置顶店铺</div>
          </div>

          <div class="item" v-if="getUserInfo.phone && getUserStatus && getUserStatus.storefront_status" @click="meau1('/restaurantService/publishService', phone)">
            <image class="icon" src="/static/images/common/manage-icon.png" mode="scaleToFill" />
            <div class="text">管理服务</div>
          </div>
          <div class="item" v-else @click="meau1('/restaurantService/publishService')">
            <image class="icon" src="/static/images/common/publish-icon.png" mode="scaleToFill" />
            <div class="text">发布服务</div>
          </div>
          <div class="item" @click="topRestaurantService()">
            <image class="icon" src="/static/images/common/top-icon.png" mode="scaleToFill" />
            <div class="text">置顶服务</div>
          </div>
        </div>
      </div>
      <div class="mine_meau_3">
        <div class="title">我的服务</div>
        <div class="meau_list">
          <div class="item" v-if="$isIos() != 'IOS'" @click="meau1('/pages3/integralRechargePage')">
            <image class="icon" src="/static/images/common/mine_jfcz1.png" mode="scaleToFill" />
            <div class="text">积分充值</div>
          </div>
          <div class="item" @click="showgzgzhPopup = true">
            <image class="icon" src="/static/images/common/mine_xgztz.png" mode="scaleToFill" />
            <div class="text">新工作通知</div>
          </div>
          <div class="item" v-if="showMfsjf == 1 || (getUserInfo && getUserInfo.integral <= 3)" @click="showJfjlPopup = true">
            <image class="icon" src="/static/images/common/mine_mfsjf.png" mode="scaleToFill" />
            <div class="text">免费送积分</div>
          </div>
          <div class="item" @click="meau1('/pages3/integralDetail')">
            <image class="icon" src="/static/images/common/mine_jfmx.png" mode="scaleToFill" />
            <div class="text">积分明细</div>
          </div>
          <div class="item" @click="lxwmShow = true">
            <image class="icon" src="/static/images/common/mine_lxwm.png" mode="scaleToFill" />
            <div class="text">联系我们</div>
          </div>
          <div class="item" @click="$togo('/pages3/certification')">
            <image class="icon" src="/static/images/common/mine_gywm.png" mode="scaleToFill" />
            <div class="text">关于我们</div>
          </div>
          <div class="item" @click="meau1('/pages3/complaint')">
            <image class="icon" src="/static/images/common/mine_tsfk.png" mode="scaleToFill" />
            <div class="text">投诉反馈</div>
          </div>
        </div>
      </div>
    </div>
    <jfjlPopup :show="showJfjlPopup" @close="showJfjlPopup = false"></jfjlPopup>
    <gzgzhpopup :show="showgzgzhPopup" @close="showgzgzhPopup = false"></gzgzhpopup>
    <!-- <loadFail @click="reload"></loadFail> -->
    <lxwmPopup title="餐饮信息网客服" submitText="拨打电话" cancelText="复制微信号" @close="closeLxwm" :show="lxwmShow"></lxwmPopup>
    <!-- <xlTabBar :selected="2"></xlTabBar> -->
  </div>
</template>

<script>
import jfjlPopup from "@/pagesHome/components/popup/jfjlPopup.vue";
import loadFail from "@/pagesHome/components/common/loadFail";
import Gzgzhpopup from "@/pagesHome/components/popup/gzgzhpopup.vue";
import lxwmPopup from "@/pagesHome/components/popup/cyxxwkfPopup.vue";
import config from "@/config.js";
import { mapActions, mapGetters } from "vuex";
export default {
  name: "mine",
  components: { loadFail, jfjlPopup, Gzgzhpopup, lxwmPopup },
  props: {
    reloadPage: {
      type: Boolean,
      default: false,
    },
    cur: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      lxwmShow: false,
      showgzgzhPopup: false,
      device_model: "", //设备型号
      showJfjlPopup: false,
      // 系统栏高度
      systemBarHeight: "",
      // 胶囊高度
      navHeight: "",
      phone: "",
      userInfo: this.$getStoraged("userInfo"),
      // userStatus: null,
    };
  },
  computed: {
    ...mapGetters("user", ["getUserInfo", "getUserStatus", "getPhone", "showMfsjf"]),
  },
  created() {
    // this.userInfo = this.getUserInfo;
    this.setStatus();
  },
  methods: {
    ...mapActions("user", ["setUserInfo", "setStatus", "chatLogin"]),
    async getInfo(id) {
      let res = await this.$http.requestSync(`/resumes/info/${id}`, {}, "GET");
      if (res.code == 200) {
        if (res.resume["is_buy_urgent"]) {
          this.$redirectTo("/pages2/regulateResume");
        } else {
          let cityCodeList = res.resume.city_id_list.split(",");
          res.resume.city_list.split(",").forEach((item, index) => {
            let obj = {};
            obj.id = cityCodeList[index];
            obj.name = item;
            this.cityList.push(obj);
          });
          this.activeCityList.push(this.cityList[0]);
          this.info = res.data;
        }
      }
    },
    closeLxwm() {
      uni.setClipboardData(
        {
          data: config.kfwxh, //要被复制的内容
          success: () => {
            //复制成功的回调函数
            uni.showToast({
              //提示
              title: `复制成功`,
              icon: "success",
            });
          },
        },
        true
      );
      this.lxwmShow = false;
    },
    meau1(url) {
      this.$checkLogin(
        () => {
          this.$togo(url, { phone: this.getUserInfo.phone });
        },
        () => {
          this.$togo("/pages2/login");
        }
      );
    },
    meauTop() {
      this.$checkLogin(
        () => {
          if (this.getUserInfo.phone && this.getUserStatus && this.getUserStatus.job_status) {
            this.$togo("/pages2/regulateJobs", { phone: this.getUserInfo.phone });
          } else {
            this.$togo("/pages2/postOffer", { phone: this.getUserInfo.phone });
          }
        },
        () => {
          this.$togo("/pages2/login");
        }
      );
    },
    meauResume() {
      this.$throttle(() => {
        this.$checkLogin(
          async () => {
            if (this.getUserInfo.phone && this.getUserStatus && this.getUserStatus.resume_status) {
              let res = await this.$http.requestSync("/resumes/my", {}, "GET");
              if (res.resumes[0]["is_buy_urgent"]) {
                this.$togo("/pages2/regulateResume");
              } else {
                this.$togo("/pages2/urgentResume", { id: res.resumes[0].id, from: "mine" });
              }
            } else {
              this.$togo("/pages2/postRecruitmentInformation", {
                phone: this.getUserInfo.phone,
              });
            }
          },
          () => {
            this.$togo("/pages2/login");
          }
        );
      });
    },
    topStore() {
      this.$throttle(() => {
        this.$checkLogin(
          async () => {
            if (this.getUserInfo.phone && this.getUserStatus && this.getUserStatus.storefront_status) {
              let { storefronts } = await this.$http.requestSync("/storefronts/my", {}, "GET");
              if (storefronts[0]["is_buy_top"]) {
                this.$togo("/shopPackage/manageStore");
              } else {
                let storeInfo = storefronts[0];
                this.$togo(`/shopPackage/topStore?id=${storeInfo.storeId}&city=${storeInfo.second_area_des}`);
              }
            } else {
              this.$togo("/shopPackage/publishStore", {
                phone: this.getUserInfo.phone,
              });
            }
          },
          () => {
            this.$togo("/pages2/login");
          }
        );
      });
    },
    topRestaurantService() {
      this.$throttle(() => {
        this.$checkLogin(
          async () => {
            if (this.getUserInfo.phone && this.getUserStatus && this.getUserStatus.storefront_status) {
              let { storefronts } = await this.$http.requestSync("/storefronts/my", {}, "GET");
              if (storefronts[0]["is_buy_top"]) {
                this.$togo("/restaurantService/manageService");
              } else {
                let storeInfo = storefronts[0];
                this.$togo(`/restaurantService/topService?id=${storeInfo.storeId}&city=${storeInfo.second_area_des}`);
              }
            } else {
              this.$togo("/restaurantService/publishService", {
                phone: this.getUserInfo.phone,
              });
            }
          },
          () => {
            this.$togo("/pages2/login");
          }
        );
      });
    },
    gomyjf() {
      this.$throttle(() => {
        this.$checkLogin(
          () => {
            this.$togo("/pages3/myIntegral", {
              integral: this.getUserInfo ? this.getUserInfo.integral : 0,
            });
          },
          () => {
            this.$togo("/pages2/login");
          }
        );
      });
    },
    // 查询用户是否发布过求职和招聘
    async H5Login() {
      // wx.config({
      //   debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      //   appId: "wx26308826332997b8", // 必填，公众号的唯一标识
      //   timestamp: new Date().getTime(), // 必填，生成签名的时间戳
      //   nonceStr: "sdvbdfbsvas", // 必填，生成签名的随机串
      //   signature: "asdgvsdvgsdvs", // 必填，签名
      //   jsApiList: ["/wechat/access_token"], // 必填，需要使用的JS接口列表
      // });
      location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbe60d6944502e4df&redirect_uri=${decodeURIComponent(
        "www.canyinxinxi.cn/pagesHome/index"
      )}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
      let res = await this.$http.request("/wechat/access_token", {}, "GET", async res => {
        console.log(res);
        try {
          // let res2 = await this.$http.request("https://api.weixin.qq.com/sns/userinfo?access_token=" + res.data);
          // console.log(res);
          uni.login({
            provider: "univerify",
            univerifyStyle: {
              // 自定义登录框样式
              //参考`univerifyStyle 数据结构`
            },
            success(res) {
              // 登录成功
              console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}
            },
            fail(res) {
              // 登录失败
              console.log(res.errCode);
              console.log(res.errMsg);
            },
          });
        } catch (error) {}
      });
    },
    async getPhoneNumber(e) {
      let _this = this;
      this.$throttle(async () => {
        if (e.detail.errMsg === "getPhoneNumber:ok") {
          //这里受机型与模拟器影响，errmsg信息各不相同，只能判断用户是否点击了允许按钮来判断，
          console.log("用户允许授权");
          // code...
          let res = await this.chatLogin({ code: e.detail.code, deviceModel: this.device_model });
          console.log("250250", res);
          if (res) {
            // _this.phone = res.phone;
            _this.setUserInfo();
            // this.setStatus();
          }
        } else {
          //如果没有走以上，均为点击了拒绝授权
          console.log("用户拒绝授权");
          uni.showToast({
            title: "登录授权已取消",
            icon: "error",
            mask: true,
          });
          // 通常会在这里弹出模态框，引导用户点击允许授权
        }
      });
    },
    appLogin() {
      console.log("app登录");
      uni.preLogin({
        provider: "univerify", //用手机号登录
        success(res) {
          uni.login({
            provider: "univerify", //用手机号登录
            univerifyStyle: {
              //参考`univerifyStyle 数据结构`
              icon: {
                path: "static/logo/onekeyLogo.png", // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
              },
              authButton: {
                normalColor: "#F83D3D", // 授权按钮正常状态背景颜色 默认值：#3479f5
                highlightColor: "#F83D3D", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
              },
              privacyTerms: {
                defaultCheckBoxState: false, // 条款勾选框初始状态 默认值： true
              },
            },
            success(res) {
              uniCloud
                .callFunction({
                  name: "quickLogin", // 你的云函数名称
                  data: {
                    access_token: res.authResult.access_token, // 客户端一键登录接口返回的access_token
                    openid: res.authResult.openid, // 客户端一键登录接口返回的openid
                  },
                })
                .then(res => {
                  console.log("364", JSON.stringify(res));
                  // res.result = {
                  //   code: '',
                  //   message: ''
                  // }
                  // 登录成功，可以关闭一键登录授权界面了
                })
                .catch(err => {
                  // 处理错误
                  console.log("364", JSON.stringify(err));
                });
            },
            fail(err) {
              console.log(JSON.stringify(err));
            },
          });
        },
        fail(err) {
          console.log(JSON.stringify(err));
        },
      });
    },
    authorize() {
      uni.preLogin({
        provider: "weixin",
        withCredentials: true,
        success: result => {
          console.log("用户同意了");
        },
        fail: error => {
          console.log("用户拒绝了");
        },
      });
    },
    reload() {
      console.log(111);
    },
    // 获取系统栏高度
    getSysteminfo() {
      uni.getSystemInfo({
        success: res => {
          console.log("getSysteminfo", res);
          this.device_model = res.deviceModel;
          this.systemBarHeight = res.statusBarHeight;
          // #ifdef MP-WEIXIN
          this.navHeight = uni.getMenuButtonBoundingClientRect().height;
          // #endif

          // #ifdef H5 || APP-PLUS
          this.navHeight = 44;
          // #endif
        },
      });
    },
  },
  watch: {
    cur: {
      async handler(n, o) {
        if (n) {
          let _this = this;
          this.$nextTick(async () => {
            if (_this.$getStoraged("phone")) {
              _this.setStatus();
              _this.setUserInfo();
              if (_this.$getStoraged("userInfo")) {
                _this.userInfo = JSON.parse(_this.$getStoraged("userInfo"));
              }

              _this.phone = JSON.parse(_this.$getStoraged("phone"));
            }
            _this.getSysteminfo();
          });
        }
      },
      immediate: true,
    },
    reloadPage(n, o) {
      if (n) {
        if (this.$getStoraged("userInfo").length) {
          this.userInfo = JSON.parse(this.$getStoraged("userInfo"));
        }
        if (this.$getStoraged("phone").length) {
          this.phone = JSON.parse(this.$getStoraged("phone"));
        }
      }
    },
  },
  // 页面周期函数--监听页面加载
  onLoad() {},
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
};
</script>

<style scoped lang="scss">
.mine {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #f7f7f7;
  overflow-y: scroll;
  .mine-top {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 358px;
    image {
      width: 100%;
      height: 100%;
    }
    uni-image {
      width: 100%;
      height: 100%;
    }
  }
  .nav {
    position: fixed;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 9999999;
  }
  .mine_info {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding: 0 15px;
    top: 58px;
    .mine_login_info {
      display: flex;
      width: 100%;
      margin-top: 20px;
      .user_head {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        display: block;
      }
      .right_info {
        margin-left: 8px;
        .login_btn {
          width: 84px;
          height: 28px;
          background: #ff8822;
          border-radius: 16px 16px 16px 16px;
          font-size: 12px;
          font-family: PingFang SC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          line-height: 28px;
          letter-spacing: 2px;
        }
        .phone {
          font-size: 18px;
          font-family: PingFang SC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333333;
        }
        .desc {
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          margin-top: 6px;
        }
      }
    }
    .mine_meau_1 {
      display: flex;
      margin-top: 24px;
      margin-bottom: 40px;
      .meau_item {
        width: 48px;
        text-align: center;
        margin-right: 24px;
        .value {
          font-size: 20px;
          font-family: Arial-Bold, Arial;
          font-weight: 700;
          color: #333333;
        }
        .name {
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          margin-top: 6px;
          line-height: 14px;
        }
      }
    }
    .mine_meau_2 {
      width: 100%;
      background: #fff;
      border-radius: 8px 8px 8px 8px;
      margin: 20px auto 15px;
      display: table;
      .title {
        font-size: 14px;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
        margin: 20px 15px 16px 15px;
      }
      .meau_list {
        display: flex;
        margin-bottom: 20px;
        flex-wrap: wrap;
        .item {
          width: 25%;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 20px;
          .icon {
            display: block;
            width: 46px;
            height: 46px;
          }
          .text {
            font-size: 12px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            margin-top: 5px;
          }
        }
      }
    }
    .mine_meau_3 {
      width: 100%;
      background: #fff;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      margin-bottom: 120px;
      .title {
        font-size: 14px;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
        margin: 20px 15px 16px 15px;
      }
      .meau_list {
        display: flex;
        flex-wrap: wrap;
        width: calc(100% - 20px);
        padding: 0 10px;
        .item {
          width: 25%;
          display: flex;
          flex-direction: column;
          margin-bottom: 20px;
          .icon {
            display: block;
            width: 40px;
            height: 40px;
            margin: 0 auto;
          }
          .text {
            font-size: 12px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            margin-top: 5px;
            text-align: center;
          }
        }
      }
    }
  }
  button {
    padding: 0;
    margin: 0;
  }
}
</style>
